<template>
  <el-color-picker v-model="theme" show-alpha :predefine="predefineColors" />
</template>

<script lang="ts" setup>
import { useSttingStore } from '@/stores/settings'

const store = useSttingStore()

const theme = ref(store.settings.theme)

const predefineColors = [
  '#ff4500',
  '#ff8c00',
  '#ffd700',
  '#90ee90',
  '#00ced1',
  '#1e90ff',
  '#c71585'
]

watch(theme, (newValue) => {
  store.changeSetting({
    key: 'theme',
    value: newValue
  })
})
</script>
